<template>
	<view class="page_main111">
		<view class="positionStyle">
			<view class="footer_box">
				<view class="little_box">
					<view @click="clickIndex">
						<image src="../../static/icon/indexIcon.png" mode="" class="img_cla" v-if="tarbarType=='index'">
						</image>
						<image src="../../static/icon/indexIcon1.png" mode="" class="img_cla" v-else></image>
						<view class="title_nav">
							首页
						</view>
					</view>
				</view>
				<view class="little_box">
					<view @click="clicklist">
						<image src="../../static/icon/listIcon1.png" mode="" class="img_cla"
							v-if="tarbarType=='list'">
						</image>
						<image src="../../static/icon/listIcon.png" mode="" class="img_cla" v-else></image>
						<view class="title_nav">
							列表
						</view>
					</view>
				</view>
				<view class="little_box" @click="clickMy" url="pages/my/index">
					<image src="../../static/icon/myIcone1.png" mode="" class="img_cla" v-if="tarbarType=='my'"></image>
					<image src="../../static/icon/myIcon.png" mode="" class="img_cla" v-else></image>
					<view class="title_nav">
						我的
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import clickindexImg from 'static/icon/indexIcon.png'
	import clicklistImg from 'static/icon/listIcon1.png'
	import clickmyImg from 'static/icon/myIcone1.png'
	import myIcon from 'static/icon/myIcon.png'
	import indexIcon from 'static/icon/indexIcon1.png'
	import listIcon from 'static/icon/listIcon.png'
	export default {
		props: {
			tarbarType: {
				default: 'index'
			}
		},
		data() {
			return {
				indexIcon: clickindexImg,
				listIcon: listIcon,
				myIcon: myIcon,
				clickindexImg: clickindexImg,
			}
		},
		methods: {
			clickIndex() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			clicklist() {
				uni.switchTab({
					url: "/pages/list/index"
				})
				this.$emit('doClick', "palyList")
			},
			clickMy() {
				uni.switchTab({
					url: "/pages/my/index"
				})
			}
		}

	}
</script>

<style lang='scss' scoped>
	.page_main111 {
		width: 710rpx;
		height: 104rpx;
		background: #FFFFFF;
		box-shadow: 0px -2px 20rpx 0px rgba(228, 228, 228, 0.5), 0px 10rpx 30rpx 0px rgba(229, 180, 199, 0.5);
		border-radius: 55rpx;
		position: fixed;
		bottom: 20rpx;
		left: 20rpx;
		.positionStyle {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.footer_box {
			display: flex;
			text-align: center;
			.little_box {
				width: 230rpx;
			}

			.img_cla {
				width: 30px;
				height: 30px;
			}

			.title_nav {
				font-size: 20px;
				font-weight: 500;
				color: #F72380;
				line-height: 20px;
				text-shadow: 0px -2px 20px rgba(228, 228, 228, 0.5);
			}
		}
	}
</style>
